<template>
  <div class="event-list-root">
    <div class="title">时间列表</div>
    <div class="block">
      <div class="bar">
        <router-link to="topic">
          <img src="../assets/close.png">
        </router-link>
      </div>
      <div class="wrap">
        <div class="content innerscr">
          <div v-for="item in data.data" class="listItem">
            <router-link to="detail" class="title" :class="{hot: item.hot}" tag="div">{{item.title}}<img src="./Home/img/fire.png" v-if="item.hot" class="hot"></router-link>
            <div class="content">{{item.content}}</div>
            <div class="cline">
              <div class="label">涉及人物：</div>
              <div class="cont">{{item.person}}</div>
            </div>
            <div class="cline">
              <div class="label">发生地点：</div>
              <div class="cont">{{item.location}}</div>
            </div>
            <div class="date">{{item.date}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'eventlist',
  data(){
    return {
      data: {}
    }
  },
  mounted(){
    fetch('/static/data-eventlist.json').then(r=>r.json()).then(data=>{
      this.data = data;
    })
  }
}
</script>

<style scoped lang="stylus">
.block
  position absolute
  background rgba(0,0,0,.3)
  top 130px
  left 320px
  right 320px
  bottom 125px
  >.bar
    display flex
    justify-content flex-end
    padding 20px
    margin-bottom 12px
  >.wrap
    padding 0 86px
    >.content
      overflow auto
      height 610px
      display flex
      flex-wrap wrap

.listItem
  margin-bottom 5px
  font-size 12px
  width 500px
  &:nth-child(odd)
    margin-right 60px
  >.title
    font-size 16px
    color #59b3ff
    margin-bottom 6px
    cursor pointer
    &.hot
      color #c10809
    >.hot
      height 14px
      margin-left 12px
      vertical-align -1px
  >.content
    line-height 22px
  >.cline
    line-height 22px
    display flex
    white-space nowrap
    >.label
      color #8dccfd
    >.content
      overflow hidden
      text-overflow ellipsis
      width 365px
  >.date
    margin-top -8px
    font-family consolas
    color #8dccfd
    letter-spacing 1px
    text-align right

</style>